<template>
  <div class="home">
    <h1 >{{ msg }}</h1>
    <button @click="req">changeMsg</button>
    <div>name: {{name}}</div>
    <div>phone: {{phone}}</div>
    <div v-for="item in list" :key="item.name">{{item.name}}</div>

    <home-demo></home-demo>
  </div>
</template>

<script lang="ts">


import Component, { Options, Vue } from 'vue-class-component'
import { reqQueryRecords } from '../../api/index'
interface User{
  name:string,
  phone:string
}
function foo() {
  const sum = 0
  return {
    sum
  }
}
@Options({})
export default class Home extends Vue {
  // msg:string= 'hello'
  list!:any
  
  public req() {
    console.log('生命周期start...')
    reqQueryRecords().then(res=>{
      const data:any = res.data
      this.$nextTick(()=>{
      this.list.value = Object.assign({},this.list,data.data)
      })

      console.log(this.list)
    })
  }

  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>
